<template>
    <div class="boxContentCss">
        <div >
            <el-form ref="formRef" :model="rentform" label-position="right" label-width="auto">
                <EdCreateCard title="租赁信息">
                    <div class="zh_flex">
                        <div class="left">
                            <el-row class="width-100">
                                <el-col :span="9"  gutter="100px">
                                    <el-form-item class="width-m100"  label="状态:" prop="leaseStatus" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                    <EdSelect v-model="rentform.leaseStatus"  style="width: 100%;" :selectParams="selectLeaseStatus"></EdSelect> 
                                        <!-- <el-input class="flex-input" style="width:100%" disabled v-if="rentform.leaseStatus==1">出租中</el-input> -->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4"><el-form-item></el-form-item></el-col>
                                <el-col :span="9">
                                    <el-form-item class="width-m50" label="房号：" prop="address" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" disabled v-model="rentform.address" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="9">
                                    <el-form-item class="width-m50" label="联系人:" prop="leaserName" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" v-model="rentform.leaserName" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4"><el-form-item></el-form-item></el-col>
                                <el-col :span="9">
                                    <el-form-item class="width-m50" label="联系电话:" prop="leaserPhone" :rules="$validate.validates({required:true,msg:'不能为空',type:'tel'})">
                                        <el-input class="flex-input" v-model="rentform.leaserPhone" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="9">
                                    <el-form-item label="出租方式:" prop="rentWay" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <template>
                                            <el-radio-group v-model="rentform.rentWay">
                                                <el-radio disabled v-model="rentform.rentWay" label='1'>整租</el-radio>
                                                <el-radio disabled v-model="rentform.rentWay" label='2'>合租</el-radio>
                                            </el-radio-group>
                                        </template>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4"><el-form-item></el-form-item></el-col>
                                <el-col :span="9">
                                    <el-form-item label="房屋面积" prop="houseArea" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentform.houseArea">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="9" style="display: flex;">
                                    <el-form-item  label-width="55px" label="户型" prop="room" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentform.room" >
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">室</i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label-width="20px" prop="hall" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentform.hall">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">厅</i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item   label-width="20px" prop="kitchen" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentform.kitchen">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">厨</i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item   label-width="20px" prop="toilets" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentform.toilets">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">卫</i>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4"><el-form-item></el-form-item></el-col>
                                <el-col :span="9">
                                    <el-form-item label="装修" prop="decorate" :rules="$validate.validates({required:true,msg:'不能为空',type: 'producetName'})">
                                        <EdSelect v-model="rentform.decorate" style="width: 100%;" :selectParams="selectRenovation"></EdSelect> 
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="8">
                                    <el-form-item label="租金" prop="rent" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentform.rent">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">元/月</i>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item label="图片" prop="pics" :rules="$validate.validates({required:true,msg:'不能为空',trigger:['blur','change']})">
                                        <el-upload
                                            accept=".jpg, .jpeg, .png, .gif"
                                            :action="action"
                                            :headers="headers"
                                            list-type="picture-card"
                                            :limit="5"
                                            :multiple="true"
                                            :file-list="fileList"
                                            :before-upload="beforeImgUpload"
                                            :on-preview="handleImgPreview"
                                            :on-success="handleImgSuccess"
                                            :on-remove="handleImgRemove">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    <p class="labelFont">请上传2M以内的图片，建议上传图片大小430px*430px,格式为jpeg、jpg、png、gif的图片，至多5张</p>
                                </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="22">
                                    <el-form-item label="房屋简介" prop="description" >
                                        <EdTinymce ref="EdTinymce" v-model="rentform.description"></EdTinymce>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item >
                                        <el-button class="ed-button ed_black-bottom" @click="onSubmit('formRef')" >确定</el-button>
                                        <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="right">
                            <div class="right_title">进度跟踪</div>
                            <div>
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item v-for="(activity, index) in activities" :key="index" color="#EED096" size="large">
                                        <div class="timeline_time">{{activity.scheduleTime}}</div>
                                        <div class="timeline_content">{{activity.status}}</div>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>
                </EdCreateCard>
            </el-form>
        </div>
    </div>
</template>
<script>
    import EdTinymce from 'src/components/EdTinymce.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { defineComponent } from 'vue'
    import {getToken} from 'src/utils/auth'
    // import { houseRentInfo,tenantInfo } from "./api";
    import * as api from './api'  
    import EdDialog from 'src/components/EdDialog.vue';
    import HouseRentDialog from './HouseRentDialog.vue'
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimeRange, EdSelect, EdTinymce, EdDialog,HouseRentDialog},
        data(){
            return{
                // 租赁信息
                rentform:{
                    id:'',
                    leaseStatus:'',
                    addressPart:'',
                    leaserName:'',
                    leaserPhone:'' ,
                    rentWay:'',
                    address:'',
                    houseArea:'',
                    room:'',
                    hall:'',
                    kitchen:'',
                    toilets:'',
                    decorate:'',
                    rent:'',
                    pics:[],
                    description:'',
                    productUrl:''
                },
                reverse: true,
                activities: [],
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                // 房屋简介-折叠
                activeNames: ['1'],
                collapse_text: '收起',
                collapse_icon: 'el-icon-arrow-up',
                action: '',
                headers:{
                    RdAuthorization: getToken()
                },
                dialogImageUrl: '',
                fileList: [],
                dialogVisible: false,
                dialogImageUrl: '',
                selectRenovation:{  // 装修类型
                    placeholder:"请选择装修类型",
                    options: [
                        { value: '1', label: '毛坯' },
                        { value: '2', label: '简装' },
                        { value: '3', label: '中装' },
                        { value: '4', label: '精装' },
                    ]
                },
                selectLeaseStatus:{
                    options:[{value: '1', label: '出租中'}],
                    disabled:true
                },
                radio:''
            }
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";
            // 出租中
            if(this.$route.query.id && this.$route.query.leaseStatus==1){
                // 编辑 
                this.houseRentInfo();
                
            }
        },
        deactivated(){
            this.rentform={}
            // 清空editor的缓存
            if(this.$refs.EdTinymce) this.$refs.EdTinymce.$children[0].cache = '';
        },
        methods:{
            houseRentInfo(){
                api.houseRentDetail({id:this.$route.query.id}).then(response => {
                    if(response.success == true) {
                        this.rentform = {...response.data}
                            this.rentform.leaseStatus=response.data.leaseStatus.toString(),
                            this.rentform.rentWay=response.data.rentWay.toString(),
                            this.rentform.pics=response.data.pics,
                            this.activities = response.data.schedule
                            let fileList = []
                            response.data.pics.forEach(x => {
                                fileList.push({url:x})
                            })
                            this.fileList = fileList
                    }
                })
            },
            gotoUrl(url){
                window.open(url, "_blank");
            },
            handleCollapseChange(val){
                console.log(val);
                this.collapse_text = val.length > 0 ? '收起' : '展开';
                this.collapse_icon = val.length > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
            },
             // 图片 上传前
            beforeImgUpload(file){
                // console.log('before-->', file)
                const fileType = file.name.split('.');
                const fileDate = fileType.slice(-1);
                if (['jpeg', 'jpg', 'png', 'gif'].indexOf(fileDate[0]) < 0) {
                    this.$message.error('仅支持格式：.jpeg、.jpg、.png、.gif!');
                    return false
                }
                const isLt5M = file.size / 1024 /1024 < 2;
                if (!isLt5M) {
                    return this.$message.error('上传文件大小不能超过 2MB!');
                }
                // return isLt5M;
                return true;
            },
            // 图片 上传成功
            handleImgSuccess(response, file, fileList){
                let res = file.response;
                if(res&&res.success == true){
                    console.log('res',res);
                    this.rentform.pics.push(res['data'])
                    this.$refs.formRef.validate()
                }
            },
            // 图片 删除
            handleImgRemove(file, fileList) {
                this.rentform.pics = fileList&&fileList.map(v=>{
                    return v['url']
                })
            },
            // 图片 预览
            handleImgPreview(file) {
                console.log('file',file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            onSubmit(formRef){
                this.$refs['formRef'].validate((valid)=>{
                    if(!valid){
                        return
                    }
                    this.rentform.id = this.$route.query.id
                    api.houseRentUpdate(this.rentform).then(res=>{
                        if(res.success){
                            this.$message.success({
                                message: '编辑成功',
                                center: true,
                                duration: 2000,
                            })
                        }
                        this.$refs.table.load()
                        this.fileList = []
                        this.$router.back()
                        this.$utilsSet.goBack(this.$router);
                        this.$refs['formRef'].resetFields()
                    })
                })
            }
        },
    })
</script>

<style scoped lang="scss">
   :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        .left{
            flex: 2;
            border-right: 1px solid #e5e7eb;
            // border: 1px solid #e5e7eb;
            padding: 0 40px 5px 20px;
        }
        .right{
            flex: 1;
            padding: 5px 20px;
        }
    }
</style>